<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OPPO注册页面</title>
<link rel="stylesheet" type="text/css" href="static/css/register.css" />
<link rel="stylesheet" href="static/css/jigsaw.css">
<script src="static/js/jigsaw.js"></script>
<script type="text/javascript" src="static/js/jquery-1.12.4.js"></script>

<style>
#msg {
	width: 100%;
	line-height: 40px;
	font-size: 14px;
	text-align: center;
}
#select{
    float:left;
}
</style>

</head>
<body>
	<div class="container">
		<div class="guidecolumn">
			<ul>
				<li class=""><a href="index.jsp">OPPO官网</a></li>
				<li class=""><a href="#">OPPO社区</a></li>
				<li class=""><a href="#">ColorOS</a></li>
			</ul>
		</div>
		<div class="main">
			<!--大框-->
			<div class="box">
				<div class="text1">注册OPPO账号</div>
				<div class="login" style = "margin-left: 340px;">
					<form action="SkipControl" method="post">
						<!--手机号-->
						<div class="row1">
							<input id="phoneNum" class="row1_1" name="user_id"
								type="text" placeholder="请输入手机号码">
						</div>
						<!--验证手机号码不能为空--->
						<div id="phonetip"
							style="margin-left: 33px; font-size: x-small; color: red; display: none;">
						请 输入手机号码</div>
						<div id="captcha"
							style="position: relative; margin-left: 37px; margin-top: 10px;"></div>
						<div id="select" >
						   <input id="selects"  type="checkbox"
							  value="立即注册" style="margin-top: 20px;margin-left:32px;length:20px;width:20px;" />
						</div>
						<div id="select" >
					     <p style = "font-size:small;margin-top: 17px;">已阅读并同意《OPPO帐号注册协议》</p>
					    </div>
						<!--注册-->
						<div class="row1">
							<input id="regist_button" class="row1_2" type="submit"
								value=" 立即注册" style="margin-top: 15px;" />
						</div>
						<div class="row1" style = "margin-top : 50px; margin-left:30px;">
							 <input id="b1" style = "cursor: pointer;border: 1px solid #E2E2E2;outline:none;background-color:white;width:320px;height:47.5px;" type="button" value=" 登录OPPO账号"  onclick="window.location.href='login.html'"/>
						</div>
						
					</form>
				</div>
			</div>
		</div>
	</div>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script src="static/layui/layui.js"></script>
    <script src="static/layui/layui.all.js"></script>
	<script>
	  		jigsaw.init(document.getElementById('captcha'), function () {
	   		 	document.getElementById('msg').innerHTML = ''
	  		})
	  		$("#b1").hover(function(){
	  			$(this).css("background-color","#D0D0D0");
	  		},function(){
	  			$(this).css("background-color","white");
	  		})
	</script>
	<script type="text/javascript">
			function hasuser() {
		        layer.msg('用户已存在,请前往登录页面！', {
		  		  offset: '80px',
				  anim: 2
				});
		    }
			function texttip() {
		        layer.msg('请阅读并同意《OPPO帐号注册协议》!', {
		  		  offset: '80px',
				  anim: 2
				});
		    }
			function errortip() {
		        layer.msg('用户已注册，请勿重复注册!', {
		  		  offset: '80px',
				  anim: 2
				});
		    }
  			$("#phoneNum").blur(function(){
  				var users = $("#phoneNum").val();
  				//alert(users);
   	    		var info;
				  $.ajax({
					  	url: "UniqueCheckControl",
		                type: "POST",
		                async:false,//默认异步执行  false为同步执行
		                data: {"user_id":users},
		                success:function(data){
		                	info = data;
		                	if(data == "用户已存在"){
		                		hasuser();
		                		$("#phoneNum").val("");
		                	}
		                }
				  })
  			});
  			$("#regist_button").click(function(){
  				if($("#phoneNum").val()==""){
		   	      	$("#phonetip").css("display","block");
		   	      	return false;
		   	      }else{
		   	    	  if($("#selects").is(':checked') == false){
		   	    		texttip();
		   	    		return false;
		   	    	  }
		   	      }
  			});
		   $("#phoneNum").focus(function(){
		   	  	$("#phonetip").css("display","none");
		   });
  		</script>
</body>
</html>

